<template>
	<view class="page_view" style="padding-top: 30rpx;">
		<view class="w-1 t-tab" style="padding: 30rpx 0;">
			<u-tabs :list="list" duration="0.2" gutter="68" inactive-color="#000000" bar-width="32" active-color="#FA360A" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 直播房间列表 -->
		<view class="w-1 p-r-30 l-list fr-b-s u-flex-wrap" >
			<!-- @click="toDetail(item.id,item.anchor.id)" -->
			<view class="l-item fl-s-s m-b-30" @click="sendApply(item.id)" v-for="(item,index) in llist" :key="index">
				<image :src="item.image" class="t-cover" mode="aspectFill"></image>
				<view class="w-1 fl-b-s" style="padding: 16rpx; height: 162rpx;">
					<text class="text-line-2 c-00 fs-26 fm-ali">{{item.content}}</text>
					<view class="w-1 fr-b-c">
						<!-- <view class="fr-s-c flex-1">
							<imagev-for="(item,index) in item.userList.users" v-if="index<5" :src="item.avatar"  class="live-head" mode="aspectFill"></image>
						</view> -->
						<view class="fr-s-c">
							<image src="/static/images/home/living_icon.png" class="living-icon"></image>
							<text class="fm-ali fs-22 c-00 m-l-10">{{item.like || 0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <text>{{count}}</text> -->
		<!-- <button @click="sendApply">申请加群</button> -->
		<!-- <button @click="sendMessage">发送消息</button> -->
		<!-- <button @click="addcount">加入直播间</button> -->
		<!-- <button @click="quitGroup">退出直播间</button> -->
		<view class="m-t-250" v-if="nodata">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import TIM from 'tim-wx-sdk';
	import tim from '@/utils/tim.js'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '关注'
				}],
				current: 0,
				llist:[],
				nodata:false,
				page:1,
				total:0,
			}
		},
		computed:{
			count() {
				return this.$store.state.count
			}
		},
		onNavigationBarButtonTap(e) {
			this.$get({
				url:'/wanlshop/live/getIsLive'
			}).then(res=>{
				console.log(res)
				if(res.code == 1){
					// res.is_apply 0暂未申请 1 暂未审核 2审核通过 3未通过审核
					if(res.data.islive == 1){
						uni.navigateTo({
							url:'/pages/Home/LivingList/live/live'
						})
					}else{
						let reasons = ['暂未申请商家认证','商家身份审核中','审核通过','商家身份审核未通过']
						this.$u.toast(reasons[res.is_apply])
					}
				}else{
					this.$u.toast(res.msg)
				}
				
			})
		},
		onReachBottom() {
			if(this.current == 1){
				if(this.llist.length<this.total){
					this.page++
					this.getMyAct()
				}
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.llist = []
			if(this.current==0){
				this.getList()
			}else{
				this.getMyAct()
			}
		},
		onLoad() {
			this.getList()
		},
		methods: { 
			// 退出
			quitGroup(group_id){
				let promise = tim.quitGroup(group_id);
				promise.then(function(imResponse) {
				  console.log(imResponse.data.groupID,'退出直播间'); // 退出成功的群 ID
				}).catch(function(imError){
				  console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
				});
			},
			// 解散直播间 群
			dismissGroup(group_id){
				tim.dismissGroup(group_id).then((imResponse) => { // 解散成功
					console.log(imResponse.data.groupID); // 被解散的群组 ID
					// 关闭直播间 刷新数据
					this.$get({
						url:'/homepage/closeLive',
						data:{
							live_id:this.llist.filter(item=>item.group_id==group_id)[0].id
						}
					}).then(()=>{
						this.page = 1
						this.llist = []
						this.getList()
					})
				}).catch(function(imError) {
					console.warn('dismissGroup error:', imError); // 解散群组失败的相关信息
				});
			},
			sendApply(id){
				uni.navigateTo({
					url:'/pages/Home/LivingList/LivingDetail/live?id='+id
				})
			},
			// 申请加群
			// sendApply(group_id,id,anchor_id){
			// 	this.$get({
			// 		url:'/homepage/getImUser',
			// 		data:{
			// 			access_token:uni.getStorageSync('access_token')
			// 		}
			// 	}).then(res=>{
			// 			tim.login({userID: String(res.data.userId), userSig: res.data.userSig}).then((imResponse)=> {
			// 				console.log(imResponse.data,'登录成功'); // 登录成功
			// 				tim.joinGroup({
			// 					 groupID: group_id,
			// 					 type: TIM.TYPES.GRP_AVCHATROOM
			// 				}).then((imResponse)=> {
			// 				  switch (imResponse.data.status) {
			// 				    case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
			// 							console.log('等待管理员审核'); // 加入的群组资料
			// 				      break;
			// 				    case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
			// 							console.log('加群成功'); // 加入的群组资料
			// 							this.toDetail(id,anchor_id,group_id)
			// 				      break;
			// 				    case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
			// 							console.log('已经在群中'); // 加入的群组资料
			// 							this.toDetail(id,anchor_id,group_id)
			// 				      break;
			// 				    default:
			// 				      break;
			// 				  }
			// 				}).catch((imError)=>{
			// 					uni.showToast({
			// 						title:'加入直播间失败',
			// 						icon:'none'
			// 					})
			// 					// this.$u.toast('加入直播间失败')
			// 				  console.warn('申请失败joinGroup error:', imError); // 申请加群失败的相关信息
			// 				});
			// 			}).catch(function(imError) {
			// 				uni.showToast({
			// 					title:'TIM登录失败',
			// 					icon:'none'
			// 				})
			// 				// this.$u.toast('TIM登录失败')
			// 				console.warn('login error:', imError); // 登录失败的相关信息
			// 			});
			// 	})				
			// },
			sendMessage(){
				this.$post({
					url:"/homepage/sendMsg",
					data:{
						access_token:uni.getStorageSync('access_token'),
						group_id:'@TGS#a52OD2OIS',
						content:'发消息啊啊啊啊啊啊啊啊啊'+Date.now()
					}
				}).then(res=>{
					console.log('掉借口 发送成功')
				}).catch(err=>{
					console.log(err,'errrrrrrrrrrrrrrrr')
				})
			},
			async getImInfo(){
				return await this.$get({
					url:'/homepage/getImUser',
					data:{
						access_token:uni.getStorageSync('access_token')
					}
				})
			},
			// 获取我关注的直播间
			getMyAct(){
				this.$get({
					url:'/homepage/Myfollow',
					data:{
						access_token:uni.getStorageSync('access_token'),
						page:this.page
					}
				}).then(res=>{
					this.llist = this.page==1?res.data.list:[...this.llist,...res.data.list]
					this.nodata = !this.llist.length
					this.total = res.data.count
				}).catch(err=>{
					this.llist = []
					this.nodata = !this.llist.length
					this.total = 0
				})
			},
			getList(num){
				this.$get({
					url:'/wanlshop/live/liveList',
					data:{
						sta:num?num:''
					},
				}).then(res=>{
					console.log(res)
					this.llist = res.data
					this.nodata = !this.llist.length
				}).catch(err=>{
					this.llist = []
					this.nodata = !this.llist.length
				})
			},
			toDetail(id,uid,group_id){
				console.log(id,uid,group_id)
				if(uid!=uni.getStorageSync('id')){
					uni.navigateTo({
						url:'./LivingDetail/WatchLiving?id='+id+'&group_id='+group_id
					})
				}else{
					uni.navigateTo({
						url:'/pages/Home/LivingList/OpenLiving/OpenDetail/playLiving?id='+id+'&group_id='+group_id
					})
				}
			},
			change(index) {
				this.current = index
				this.page = 1
				this.llist = []
				if(index==0){
					this.getList()
				}else{
					this.getList(1)
				}
			}
		}
	}
</script>

<style>
	.page_view{
		min-height: 100vh;
		background-color: #fff;
	}
.t-tab{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
	background: #fff;
}

.l-item{
	width: 328rpx;
	overflow: hidden;
	border-radius: 12rpx;
	background: #f8f8f8;
}

.t-cover{
	width: 328rpx;
	height: 328rpx;
}
.live-head{
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ffffff;
		background-color: antiquewhite;
		border-radius: 50%;
	}
	
	.live-head + .live-head{
		margin-left: -16rpx;
	}
	
	.living-icon{
		width: 14rpx;
		height: 16rpx;
	}
</style>
